/**
* tab页面配置
*/
import React, { Component } from 'react';
import { View, StyleSheet, Image, Text, Linking, TouchableOpacity } from "react-native";
import { connect } from 'react-redux';
import { Contract } from '../../service/index.js';
import { create_service } from '../../redux/index.js';
import {getSystemName, getVersion, getSystemVersion, getModel, getUniqueId} from 'react-native-device-info';
import TabNavigator from 'react-native-tab-navigator';
import Modal from 'react-native-modal';

import { TeamTabView } from './TeamTabView.js';
import { ProfitTabView } from './ProfitTabView.js';
import { PersonalTabView } from './PersonalTabView.js';
import { ImageRes, Dimens } from '../../utils/Assets';
import { getStore } from '../../redux/index.js';

import { Actions } from 'react-native-router-flux';

// import JPush from 'jpush-react-native';

class MainView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            selectedTab: 'Team',
            versionModalVisible: false,
            is_force:false,
            content:[],
            download_url:'',
            new_version:'',
        }

        this.userInfo = getStore().getState().auth.userInfo
    }
    componentDidMount() {
        let that = this;
        /**
         * 极光
         */
        // JPush.init();
        // JPush.setLoggerEnable(true)

        // JPush.addConnectEventListener((result) => {
        //     console.log("connectListener=================>>>>>:" + JSON.stringify(result))
        // });

        // JPush.addNotificationListener((result) => {
        //     console.log("addNotificationListener=================>>>>>:" + JSON.stringify(result))
        //     if(result.notificationEventType == 'notificationOpened'){
        //         let extras = result.extras;
                
        //         if(extras.type == 'NewTeamMembers'){
        //             Actions.teamManagerListView({users_id: this.userInfo.user.id})
        //         }else if(extras.type == 'NewIncome'){
        //             Actions.profitDetailView({ data: extras.data })
        //         }
                
        //     }
        //     console.log("addNotificationListener=================>>>>>:" + JSON.stringify(result))
        // });

        // JPush.addLocalNotificationListener((result) => {
        //     console.log("addLocalNotificationListener=================>>>>>:" + JSON.stringify(result))
        // });

        // JPush.addCustomMessagegListener((result) => {
        //     console.log("addCustomMessagegListener=================>>>>>:" + JSON.stringify(result))
        // });

        // JPush.addTagAliasListener((result) => {
        //     console.log("addTagAliasListener=================>>>>>:" + JSON.stringify(result))
        // });

        // JPush.addMobileNumberListener((result) => {
        //     console.log("addMobileNumberListener=================>>>>>:" + JSON.stringify(result))
        // });

        // JPush.getRegistrationID((result) => {
        //     if(result.registerID){
        //         that.props.dispatch(create_service(Contract.PHONE_INFO, { 
        //             phone_model:getModel(), 
        //             app_name:'KAOLAGUANLI', 
        //             system:getSystemName(), 
        //             version:getSystemVersion(), 
        //             uuuid:getUniqueId(), 
        //             appVersion:getVersion(),
        //             token:this.userInfo.token,
        //             jiguang_register_id: result.registerID
        //         })).then((res) => {
        //             if(res){
        //                 if(res.version.newest){
        //                     this.setState({
        //                         versionModalVisible:true,
        //                         content:res.version.update_content,
        //                         download_url:res.version.download_url,
        //                         new_version:res.version.version,
        //                         is_force:res.version.is_force
        //                     })
        //                 }
        //             }
        //         })
        //     }
        // })

        this.props.dispatch(create_service(Contract.PHONE_INFO, { 
            phone_model:getModel(), 
            app_name:'KAOLAGUANLI', 
            system:getSystemName(), 
            version:getSystemVersion(), 
            uuuid:getUniqueId(), 
            appVersion:getVersion(),
            token:this.userInfo.token,
         })).then((res) => {
             if(res){
                 if(res.version.newest){
                     this.setState({
                         versionModalVisible:true,
                         content:res.version.update_content,
                         download_url:res.version.download_url,
                         new_version:res.version.version,
                         is_force:res.version.is_force
                     })
                 }
             }
        })
    }
    componentWillUnmount() {
    }

    hideVersionModalVisible = () => {
        if(this.state.is_force){
            return;
        }

        this.setState({
            versionModalVisible:false
        })
    }

    version = (version, content) => {
        return <Modal isVisible={this.state.versionModalVisible}
                animationInTiming={500}
                animationOutTiming={100}
                animationIn="zoomInUp"
                animationOut={'zoomOutDown'}
                backdropOpacity={0.2}
                style={{
                    marginLeft: 10,
                    marginRight: 10,
                    justifyContent:'center',
                    alignItems:'center',
                    marginTop: 50,
                }}
                onBackdropPress={() => {
                    this.hideVersionModalVisible()
                }}>
                    <View style={{width:Dimens.DeviceWidth-60}}>
                        <View style={{
                                width:Dimens.DeviceWidth-60, 
                                overflow:'hidden',
                                borderTopLeftRadius:8,
                                borderTopRightRadius:8,
                                backgroundColor:'#fff',
                                position:'relative',
                            }}>
                            <Image style={{
                                    width:'auto',
                                    height:173,
                                }} resizeMode='contain' source={ImageRes.version_bg}></Image>
                                <View style={{
                                    position:'absolute',
                                    top:30,
                                    left:20,
                                    color:'#fff'
                                }}>
                                    <Text style={{
                                        color:'#fff',
                                        fontSize:26,
                                        fontWeight:'600'
                                    }}>发现新版本</Text>
                                    <Text style={{
                                        color:'#fff',
                                        fontSize:20,
                                        marginTop:20,
                                        fontWeight:'600'
                                    }}>{version}</Text>
                                </View>
                        </View>
                        <View style={{
                                backgroundColor:'#fff',
                                width:Dimens.DeviceWidth-60,
                                padding:20
                            }}>
                            <Text style={{marginTop:10,fontSize:26, fontWeight:'700', color:'#2E2E2E'}}>更新内容</Text>
                            {content.map((item, index) => {
                                return <Text style={{marginTop:20,fontSize:14,color:'#8E8E93'}} key={index}> {item}</Text>
                            })}
                        </View>
                        <View style={{
                                paddingVertical:15,
                                borderBottomLeftRadius:8,
                                borderBottomRightRadius:8,
                                backgroundColor:'#378efb',
                                width:Dimens.DeviceWidth-60,
                            }}>
                                <TouchableOpacity style={{ justifyContent: 'center', marginRight: 15 }} onPress={() => {
                                    Linking.openURL(this.state.download_url).catch(err => Layer.showMsg('跳转失败'));
                                }}>
                                    <Text style={{color:'#fff',fontSize:15, textAlign:'center',fontWeight:'600'}}>更新版本</Text>  

                                </TouchableOpacity>
                        </View>
                    </View>
            </Modal>
    }

    render() {
        return (
            <View style={styles.container}>
                {this.version(this.state.new_version, this.state.content)}
                <TabNavigator tabBarStyle={styles.tabBarStyle} tabBarShadowStyle={{ backgroundColor: 'transparent' }} >
                    {this._renderTabItem('Team', '团队', ImageRes.tab_team_sel, ImageRes.tab_team_un_sel, 'Team', <TeamTabView onPressTab={this._onPressTab.bind(this)} />)}
                    {this._renderTabItem('Profit', '收益', ImageRes.tab_profit_sel, ImageRes.tab_profit_un_sel, 'Profit', <ProfitTabView onPressTab={this._onPressTab.bind(this)} />)}
                    {this._renderTabItem('Personal', '我的', ImageRes.tab_personal_sel, ImageRes.tab_personal_un_sel, 'Personal', <PersonalTabView onPressTab={this._onPressTab.bind(this)} />)}
                </TabNavigator>
            </View>
        )
    }
    _renderTabItem(name, title, selectedIcon, icon, pressType, content) {
        return (
            <TabNavigator.Item
                selected={this.state.selectedTab == name}
                tabStyle={{ justifyContent: 'center' }}
                title={title}
                titleStyle={styles.titleStyle}
                selectedTitleStyle={styles.selectedTitleStyle}
                renderIcon={() => <Image style={styles.icon} source={icon} />}
                renderSelectedIcon={() => <Image style={styles.icon} source={selectedIcon} />}
                onPress={this._onPressTab.bind(this, pressType)}>
                {content}
            </TabNavigator.Item>
        )
    }
    _onPressTab(tabName) {
        this.setState({ selectedTab: tabName })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabBarStyle: {
        backgroundColor: '#ffffff',
        alignItems: 'center',
        height: Dimens.TabBarHeight,
        paddingBottom: Dimens.isIPhoneX ? 20 : 0,
    },
    icon: {
        height: 20,
        width: 20,
        resizeMode: 'contain'
    },
    titleStyle: {
        color: '#999999',
        fontSize: 13
    },
    selectedTitleStyle: {
        color: '#378EFB',
        fontSize: 13
    }
});
const ExportView = connect()(MainView);
module.exports.MainView = ExportView
